import React, { PureComponent } from 'react';
import { observer } from 'mobx-react';
import { WeaFormItem, WeaInput, WeaTools } from 'ecCom';
import { SelectNew } from 'antd';

const { Option } = SelectNew;
const { callApi } = WeaTools;

@observer
export default class FormSelect extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      options: [],
      isOnselect: false,
      optionCache: [],
    };
  }

  handleChange = async (value) => {
    const { handleChange, field } = this.props;
    const key = field.domkey[0];
    let options;
    if (!value) {
      options = [];
    } else {
      // 选项
      let result = await callApi('/api/public/browser/complete/1', 'GET', {
        q: value,
      });
      options = result.datas || [];
    }
    let changeVal = '';
    if (!this.state.isOnselect) {
      this.setState({ options, optionCache: options });
      changeVal = value;
    } else {
      let filterVal = this.state.optionCache.filter(v => v.id === value);
      filterVal = (filterVal && filterVal[0]) || {};
      changeVal = filterVal.lastname || '';
      this.setState({ options }, () => {
        this.setState({ isOnselect: false });
      });
    }
    if (handleChange && typeof handleChange === 'function') {
      handleChange(key, changeVal);
    }
  };
  handleSelect = (value, option) => {
    const { handleSelect, field } = this.props;
    this.setState({ isOnselect: true });
    if (handleSelect && typeof handleSelect === 'function') {
      handleSelect(option.props.search, option.props.ids, field.domkey[0]);
    }
  };

  onSelectBlur = () => this.setState({ options: [] });

  render() {
    const { field, refreshSelect } = this.props;
    return (
      <WeaFormItem
        ecId={`${
          (this && this.props && this.props.ecId) || ''
        }_WeaFormItem@mcd9un@${field.domkey[0]}`}
        key={field.domkey[0]}
        label={`${field.label}`}
        labelCol={{ span: field.labelcol }}
        wrapperCol={{ span: field.fieldcol }}
      >
        {!refreshSelect ? (
          <SelectNew
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_Select@y12sne@${field.domkey[0]}`}
            combobox
            style={{ width: '100%' }}
            onChange={this.handleChange}
            filterOption={false}
            onSelect={this.handleSelect}
            onBlur={this.onSelectBlur}
            optionLabelProp="search"
          >
            {this.state.options.map(item => (
              <Option
                ecId={`${
                  (this && this.props && this.props.ecId) || ''
                }_Option@cmv87e@${item.title}`}
                ids={item.id}
                value={item.id}
                search={item.lastname}
              >
                {item.title}
              </Option>
            ))}
          </SelectNew>
        ) : (
          <WeaInput
            ecId={`${
              (this && this.props && this.props.ecId) || ''
            }_WeaInput@p7783p@${field.domkey[0]}`}
          />
        )}
      </WeaFormItem>
    );
  }
}
